<template>
  <page-header-wrapper>
    <a-card :bordered='false' :body-style="{ padding: '0' }" style='margin-top: 10px'>
      <a-row style='margin-top: 20px;margin-left: 20px'>

        <a-col :md='8' :sm='24'>
          <a-button type='primary' @click='query_course'>查询</a-button>
          <a-button type='primary' @click='show_add(true)' style='margin-left: 20px'>新增</a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-table :columns='columns' :data-source='data' bordered>
          <template slot='operation' slot-scope="text, record">
            <a-button type='primary' @click='show_edit(true, record)'>修改</a-button>
            <a-button type='primary' @click='remove_c(record)'>删除</a-button>

          </template>
        </a-table>
      </a-row>
      <a-modal title='新增课程' :visible='add_visible' @ok='add' @cancel='add_visible = false'>
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label='名称:'>
            <a-input type='primary' v-model='new_course.c_name'></a-input>
          </a-form-item>
          <a-form-item label='描述:'>
            <a-input type='primary' v-model='new_course.desc'></a-input>
          </a-form-item>
          <a-form-item label='授课教师:'>
            <a-input type='primary' v-model='new_course.teacher'></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
      <a-modal title='修改课程' :visible='edit_visible' @ok='edit' @cancel='edit_visible = false'>
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label='名称:'>
            <a-input type='primary' v-model='edit_var.c_name'></a-input>
          </a-form-item>
          <a-form-item label='描述:'>
            <a-input type='primary' v-model='edit_var.desc'></a-input>
          </a-form-item>
          <a-form-item label='授课教师:'>
            <a-input type='primary' v-model='edit_var.teacher'></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>

  </page-header-wrapper>
</template>

<script>
import request from '@/utils/request'

const columns = [
  {
    title: '课程名称',
    dataIndex: 'c_name',
    key: 'c_name',
    scopedSlots: { customRender: 'c_name' }
  },
  {
    title: '课程描述',
    dataIndex: 'desc',
    key: 'desc',
    scopedSlots: { customRender: 'desc' }
  },
  {
    title: '教师',
    dataIndex: 'teacher',
    key: 'teacher',
    scopedSlots: { customRender: 'teacher' }
  },{
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width:200,
    scopedSlots: { customRender: 'operation' }
  },
]
const data = []

export default {
  name: 'Course',
  data() {
    return {
      columns,
      data,
      add_visible: false,
      new_course: {
        c_name:'',
        desc:'',
        teacher:''
      },
      edit_visible: false,
      edit_var: {},
    }
  },
  methods: {
    query_course() {
      let that = this
      request({
        url: 'course/query',
        method: 'get',
      }).then((res) => {

        that.data = []
        if(res.code == 200) {
          // let records = res.data.list
          let arr = []
          for (let i in res.data.list){
            let mdata = {
              'key':res.data.list[i]['pk'],
              'id':res.data.list[i]['pk'],
              'c_name': res.data.list[i]['fields']['c_name'],
              'desc': res.data.list[i]['fields']['c_discript'],
              'teacher': res.data.list[i]['fields']['c_teacher']
            }
            arr.push(mdata)
          }
          that.data = arr
          console.log('data is ')
          console.log(that.data)
        }
      }).finally()
    },
    show_add(tag){
      this.add_visible = tag
    },
    add() {
      request({
        url: 'course/insert',
        method: 'post',
        data: this.new_course
      }).then((res) => {
        if (res.code == 200) {
          alert('新建成功！')
        }
      }).finally(
        this.add_visible = false
      )
    },
    show_edit(tag, record) {
      this.edit_visible = tag
      this.edit_var = record
    },
    edit(record) {
      request({
        url: 'course/update',
        method: 'post',
        data: this.edit_var
      }).then((res) => {
        if (res.code == 200) {
          alert('修改成功！')
        }
      }).finally(
        this.edit_visible = false
      )
    },
    remove_c(record) {
      console.log(record)
      request({
        url: 'course/delete?id=' + record['key'],
        method: 'get',
      }).then((res) => {
        if (res.code == 200) {
          alert('删除成功！')
        }else {
          alert(record.data)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>